<template>
	<!-- 定期排查新增页面 -->
	<view class="workApply-container" :style="{ height: `${windowHeight}px` }">
		<!-- 基础表单校验 -->
		<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" border>
			<uni-forms-item label="任务编号：" name="taskNumber">
				<uni-easyinput v-model="valiFormData.taskNumber" placeholder="请输入" :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="所属检查计划：" required name="planId">
				<uni-data-select :localdata="checkPlanOption" @change="checkPlanChange" v-model="valiFormData.planId" />
			</uni-forms-item>
			<uni-forms-item label="检查任务名称：" required name="taskName">
				<uni-easyinput v-model="valiFormData.taskName" placeholder="请输入" :inputBorder="false" />
			</uni-forms-item>
			<!-- 上面选择检查计划回写上来的 -->
			<uni-forms-item label="检查层级：" required name="taskLevel">
				<template v-if="valiFormData.taskLevel == 1">公司级</template>
				<template v-else-if="valiFormData.taskLevel == 2">部门级</template>
				<template v-else-if="valiFormData.taskLevel == 3">班组级</template>
			</uni-forms-item>
			<uni-forms-item label="检查时间：" required name="taskTime">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="valiFormData.taskTime" />
			</uni-forms-item>
			<!-- 上面选择检查计划回写上来的 -->
			<uni-forms-item label="检查执行人：" required name="examineExecutorId">
				<text> {{valiFormData.examineExecutorName}}</text>
			</uni-forms-item>
			<!-- 多选 -->
			<uni-forms-item label="检查参与人：" required name="examineParticipantIds	">
				<uni-data-select :localdata="peopleOption" v-model="valiFormData.examineParticipantIds" />
			</uni-forms-item>
			<!-- 上面选择检查计划回写上来的 -->
			<uni-forms-item label="被检查单位：" required name="passReviewUnitId">
				<text> {{valiFormData.passReviewUnitName}}</text>
			</uni-forms-item>

			<uni-forms-item label="外部人员：" required name="outPerson">
				<uni-data-select :localdata="peopleOption" v-model="valiFormData.outPerson" />
			</uni-forms-item>



			<uni-forms-item label="检查表内容：" required>
				<button type="primary" size="mini" @click="manualBtn">手工选择</button>
				<button size="mini">获取上次检查标准</button>
			</uni-forms-item>
		</uni-forms>
		<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
			@selection-change="selectionChange">
			<uni-tr>
				<uni-th align="center">序号</uni-th>
				<uni-th align="center">检查范围</uni-th>
				<uni-th align="center">检查标准</uni-th>
				<uni-th align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td>{{ index +1 }}</uni-td>
				<uni-td>
					<view class="name">{{ item.inspectionScopeName }}</view>
				</uni-td>
				<uni-td align="center">{{ item.inspectionStandard }}</uni-td>
				<uni-td>
					<view class="uni-group">
						<!-- 						<button class="uni-button" size="mini" type="primary">修改</button> -->
						<button class="uni-button" size="mini" type="warn">删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>

		<button type="primary" @click="submit('valiForm')" class="submit-btn">
			确认
		</button>

		<templtae v-if="manualVisible">

			<ManualSelect ref="manualChild" @manualCheck="manualCheckBack"></ManualSelect>
		</templtae>
	</view>
</template>

<script>
	import widowHeightMixins from "@/mixins/widowHeightMixins.js";
	import ManualSelect from "./modal/manualSelect.vue"

	import {
		listCheckPlan,
		detailCheckPlan
	} from "@/api/hiddenTrouble/checkPlan.js"

	export default {
		mixins: [widowHeightMixins],
		components: {
			ManualSelect
		},
		onLoad(e) {
			// console.log(e, "e");
			// 动态设置标题
			uni.setNavigationBarTitle({
				title: `定期排查流程--发起检查`,
			});
		},
		data() {
			return {
				//手工选择弹窗
				manualVisible: false,
				// 校验表单数据
				valiFormData: {
				
				},
				taskLevelOption: [],
				//所属检查计划的option
				checkPlanOption: [],
				//检查表内容
				tableData: [
			
				],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				// 动火人下拉框
				peopleOption: [{
						value: 0,
						text: "人员1"
					},
					{
						value: 1,
						text: "人员2"
					},
					{
						value: 2,
						text: "人员3"
					},
				],
			
			
				// 校验规则
				rules: {
					dept: {
						rules: [{
							required: true,
							errorMessage: "姓名不能为空",
						}, ],
					},
					name: {
						rules: [{
							required: true,
							errorMessage: "姓名不能为空",
						}, ],
					},
					age: {
						rules: [{
								required: true,
								errorMessage: "年龄不能为空",
							},
							{
								format: "number",
								errorMessage: "年龄只能输入数字",
							},
						],
					},
				},
			};
		},
		methods: {
			// 手工选择按钮
			manualBtn() {
				this.manualVisible = true
				this.$nextTick(() => {
					this.$refs["manualChild"].changeShow()
				})
			},
			//手工选择返回
			manualCheckBack(val) {
				console.log("返回的", val)
				this.tableData = val
			},
			//获取所属检查计划数据
			async getCheckPlan() {
				let res = await listCheckPlan();
				this.checkPlanOption = res.rows.map((item) => {
					return {
						value: item.id,
						text: item.planCategory
					}
				})
			},
			// 切换检查计划
			async checkPlanChange(val) {
				console.log("val==", val)
				let res = await detailCheckPlan(val);
				// this.$nextTick(() => {
				// this.valiFormData = res.data

				this.valiFormData.taskLevel = res.data.planLevel
				this.valiFormData.examineExecutorId = res.data.planUserId
				this.valiFormData.examineExecutorName = res.data.planUserName
				this.valiFormData.passReviewUnitId = res.data.deptId;
				this.valiFormData.passReviewUnitName = res.data.deptName

			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				// this.selectedIndexs = e.detail.index
			},
			submit(ref) {
				this.$refs[ref]
					.validate()
					.then((res) => {
						console.log("success", res);
						// uni.showToast({
						//   title: `校验通过`,
						// });
					})
					.catch((err) => {
						console.log("err", err);
					});
			},
		},
		mounted() {
			this.getCheckPlan()
		}
	};
</script>

<style lang="scss" scoped>
	.workApply-container {
		padding: 20rpx;
		background-color: #fff;
		overflow-y: auto;

		::v-deep {
			.uni-forms-item--border {
				border-top: 0 solid #000;
				border-bottom: 2rpx solid #e8eaec;
			}

			.uni-forms-item__label {
				width: 40% !important;
			}

			.submit-btn {
				margin-top: 30rpx;
				background: #137ee9;
				border-radius: 10rpx;
			}
		}
	}
</style>